<template>
    <div class="boxDistribution">
        <cardBox class="left-wrapper" title="目录" icon="&#xe6f2;">
            <template v-if="isSetting">
                <el-button type="primary" size="mini"  icon="el-icon-plus">新建分布图</el-button>
            </template>
            <menuAll :CATEGROY="isSetting ? 10 : 11" :stationId="stationId" :outCategory="10" menuHeight="calc(100vh - 240px)" @getList="getTreeID" :showRoleAdd="showRoleAdd" :showRoleDel="showRoleDel" :showRoleEdit="showRoleEdit"/>
        </cardBox>


        <div class="chart-container" v-loading="loading" element-loading-text="分布图加载中，请稍后">
            <!-- 空状态提示 -->
            <div v-if="chartDataList.length === 0 && !loading" class="empty-state">
            <noData showChart description="暂无分布图数据，请先添加分布图"/>
            </div>

            <!-- 图表卡片列表 -->
            <div class="chart-cards" v-if="chartDataList.length > 0">
            <div 
                v-for="(item, index) in chartDataList" 
                :key="`chart-${item.id}-${index}`" 
                class="chart-card"
                :class="{ 'chart-card-expanded': expandedChartIds.includes(item.id) }"
            >
                <!-- 卡片头部 -->
                <div class="chart-card-header" @click="toggleChart(item.id)">
                <div class="chart-title">
                    <i class="el-icon-s-data title-icon"></i>
                    <span class="title-text">{{ item.data.line.name }}</span>
                </div>
                
                <div class="chart-actions">
                    <el-tooltip effect="dark" content="展开/折叠图表" placement="top">
                    <i 
                        class="el-icon-arrow-down expand-icon" 
                        :class="{ 'expanded': expandedChartIds.includes(item.id) }"
                    ></i>
                    </el-tooltip>
                </div>
                </div>
                
                <!-- 图表内容 -->
                <transition name="el-zoom-in-top">
                <div v-show="expandedChartIds.includes(item.id)" class="chart-card-content">
                    <!-- 图表操作栏 -->
                    <div class="chart-toolbar">
                    <el-tooltip class="item" effect="dark" content="修改分布图" placement="top">
                        <el-button 
                        size="mini" 
                        icon="el-icon-edit" 
                        @click="handleAddLine(item.data.line)"
                        class="toolbar-btn"
                        type="primary"
                        >修改</el-button>
                    </el-tooltip>
                    
                    <el-tooltip class="item" effect="dark" content="配置分布图" placement="top">
                        <el-button 
                        size="mini" 
                        icon="el-icon-setting" 
                        @click="handleSetLineDataDialog(item.data.line.id, item.data.lineInfos)"
                        class="toolbar-btn"
                        type="primary"
                        >配置</el-button>
                    </el-tooltip>
                    
                    <el-tooltip class="item" effect="dark" content="删除分布图" placement="top">
                        <el-button 
                        size="mini" 
                        icon="el-icon-delete" 
                        @click="handleDelLine(item.data.line.id, item.data.line.name)"
                        class="toolbar-btn"
                        type="danger"
                        >删除</el-button>
                    </el-tooltip>
                    
                    <el-divider direction="vertical" v-if="!isSetting"></el-divider>
                    
                    <el-tooltip class="item" effect="dark" content="恢复删除点" placement="top" v-if="!isSetting">
                        <el-button 
                        size="mini" 
                        icon="el-icon-refresh" 
                        @click="handlerestoreLine(item.data.line.id, index)"
                        class="toolbar-btn"
                        >恢复点</el-button>
                    </el-tooltip>
                    
                    <el-tooltip class="item" effect="dark" content="数据过滤" placement="top" v-if="!isSetting">
                        <el-button 
                        size="mini" 
                        icon="el-icon-finished" 
                        @click="handleSetFilterData(item.data.lineInfos)"
                        class="toolbar-btn"
                        >数据过滤</el-button>
                    </el-tooltip>
                    
                    <el-tooltip class="item" effect="dark" content="审核状态筛选" placement="top" v-if="!isSetting">
                        <el-button 
                        size="mini" 
                        icon="el-icon-document-checked" 
                        @click="handleSetExamineData(item.data.line)"
                        class="toolbar-btn"
                        >审核状态</el-button>
                    </el-tooltip>
                    
                    <el-tooltip class="item" effect="dark" content="时间设置" placement="top" v-if="!isSetting">
                        <el-button 
                        size="mini" 
                        icon="el-icon-time" 
                        @click="handleSetTimeData(item.data.lineInfos[0])"
                        class="toolbar-btn"
                        >时间设置</el-button>
                    </el-tooltip>
                    </div>
                    
                    <!-- 图表容器 -->
                    <div 
                    class="chart-wrapper" 
                    :style="{
                        width: item.data.line.width ? item.data.line.width + 'px' : '100%', 
                        height: item.data.line.height ? item.data.line.height + 'px' : '340px'
                    
                    }"
                    v-loading="chartLoading[item.id]"
                        element-loading-text="图表更新中"
                        element-loading-background="rgba(255, 255, 255, 0.8)"
                    >
                    <div 
                        :id="`chart${item.id}`" 
                        class="chart-line" 
                        :ref="`chart${item.id}`"
                    ></div>
                    </div>
                    
                    <!-- 图表信息栏 -->
                    <div class="chart-info">
                    <div class="info-item">
                        <span class="info-label">数据点数:</span>
                        <span class="info-value">{{ getDataPointCount(item.data) }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">时间范围:</span>
                        <span class="info-value">{{ getTimeRange(item.data) }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">审核状态:</span>
                        <span class="info-value">{{ getSatusShow(item.data) }}</span>
                    </div>
                    </div>
                </div>
                </transition>
            </div>
            </div>
        <!-- 添加/编辑过程线对话框 -->
        <infoDialog :visible.sync="linesAddDialog" :linesDialogForm="linesDialogForm" @saveLineDialog="handleSaveLineDialog" name="分布图" isFB/>

        <!-- 配置过程线对话框 -->
        <setLineData :visible.sync="setLineDataDialog" name="分布图" :stationId="stationId" :setDataForm="setDataForm" :lineId="LineID"
        @saveSetDialog="handleSaveSetDialog"/>

        <!-- 数据过滤对话框 -->
        <filterDialog 
        :visible.sync="filterVisible" 
        :filterSelectList="filterSelectList" 
        :lineID="LineID"
        />

        <!-- 恢复删除点对话框 -->
        <refreshDelPoint 
        :visible.sync="restoreVisible" 
        :restoreList="restoreList" 
        @closeRefreshDel="handleCloseRefreshDel"
        />

        <el-dialog
        title="审核状态设置" 
        v-dialogDrag 
        :visible.sync="examineDialogVisible" 
        width="420px"
        :close-on-click-modal="false"
        class="examine-filter-dialog">
        <div class="dialog-content">
            <!-- 筛选说明 -->
            <div class="filter-tip">
            <i class="el-icon-filter"></i>
            <span>选择要显示的审核状态数据</span>
            </div>

            <!-- 状态筛选 -->
            <div class="filter-section">
            <div class="filter-header">
                <span class="filter-title">审核状态</span>
                <div class="quick-actions">
                <el-button size="mini" text @click="selectAll">全选</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button size="mini" text @click="clearAll">清空</el-button>
                </div>
            </div>

            <el-checkbox-group v-model="OUTLIERSIGNs" class="compact-checkbox-group">
                <div class="compact-option">
                <el-checkbox :label="0" class="compact-checkbox">
                    <div class="option-content">
                    <span class="status-badge pending"></span>
                    <span class="status-text">未审核</span>
                    </div>
                </el-checkbox>
                </div>

                <div class="compact-option">
                <el-checkbox :label="1" class="compact-checkbox">
                    <div class="option-content">
                    <span class="status-badge approved"></span>
                    <span class="status-text">审核通过</span>
                    </div>
                </el-checkbox>
                </div>

                <div class="compact-option">
                <el-checkbox :label="2" class="compact-checkbox">
                    <div class="option-content">
                    <span class="status-badge rejected"></span>
                    <span class="status-text">审核未通过</span>
                    </div>
                </el-checkbox>
                </div>
            </el-checkbox-group>
            </div>

            <!-- 筛选统计 -->
            <div class="filter-stats">
            <div class="stats-item">
                <span class="stats-label">已选择:</span>
                <span class="stats-value">{{ OUTLIERSIGNs.length }}/3 个状态</span>
            </div>
            </div>
        </div>

        <div class="dialog-footer">
            <el-button @click="examineDialogVisible = false" size="small" icon="el-icon-circle-close" class="cancel-btn">取消</el-button>
            <el-button 
            type="primary" 
            @click="handleConfirmExamine" 
            size="small"
            class="confirm-btn"
            icon="el-icon-upload"
            >
            保存配置
            </el-button>
        </div>
    </el-dialog>


      <el-dialog
        title="时间设置"  v-dialogDrag :visible.sync="timeDialogVisible" width="400px" >
        <div>
            <el-form ref="timeData" :model="timeData" label-width="100px" size="medium">
                <el-form-item label="日期">
                    <el-date-picker
                      v-model="timeData.b_Time"
                      type="date"
                      size="small"
                      format="yyyy年MM月dd日"
                      value-format="yyyy/MM/dd"
                      placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="时间长度">
                    <el-input-number v-model="timeData.t_Len" :min="1"  label="请输入"  controls-position="right"></el-input-number>
                </el-form-item>
            </el-form>    
        </div>
        <div class="dialog-footer">
            <el-button  size="small" icon="el-icon-circle-close" @click="timeDialogVisible = false" class="cancel-btn">取消</el-button>
            <el-button type="primary"  size="small" icon="el-icon-circle-check" @click="handleConfirmTime" class="confirm-btn">保存配置</el-button>
        </div>
      </el-dialog>

    </div>
    </div>
</template>
<script>
import cardBox from "@/components/base/cardBox.vue";
import menuAll from '@/components/page/informationAnalysis/menuAll.vue'
import {getLineViewsByTreeID,linesDel,getLineInfosV1,setLineOUTLIERSIGN,setFBTTime } from "@/api/https";
import infoDialog from './infoDialog.vue'
import setLineData from './setLineDialog.vue'
import refreshDelPoint from './refreshDelPoint.vue'
import filterDialog from './filterChart.vue'
import * as echarts from 'echarts';
import noData from '@/components/base/noData.vue'
export default ({
    components:{cardBox,menuAll,infoDialog,setLineData,refreshDelPoint,filterDialog,noData},
    props:{
        stationId:{
            type:[String,Number],
            default:'',
        },
        isSetting:{
            type:Boolean,
            default:false
        },
        showRoleAdd:{
          type:Number,
          default:0
        },
        showRoleEdit:{
          type:Number,
          default:0
        },
        showRoleDel:{
          type:Number,
          default:0
        }
    },
    data() {
        return {
            treeId:0,
            expandedChartIds:[],
            chartDataList:[],
            loading:false,
            chartInstances:[],
            linesAddDialog:false,
            linesDialogForm:{},
            LineID:0,
            setLineDataDialog:false,
            setDataForm:[],
            examineDialogVisible:false,
            OUTLIERSIGNs:[],
            timeData:{},
            timeDialogVisible:false,
            chartLoading: {},
            filterSelectList:[],
            filterVisible:false,
            restoreList:[],
            restoreVisible:false
        }   
    },
    mounted(){
         window.addEventListener('resize', this.handleResize);
    },
    deactivated(){
        this.clearChart()
    },
    beforeDestroy(){
        this.clearChart()
        window.removeEventListener('resize', this.handleResize);
    },
    watch:{
        stationId: {
            handler(newVal, oldVal) {
             this.clearChart(true);
            },
        },
        isReload: {
            handler(newVal) {
            if (newVal) {
                this.clearChart(true);
                this.$emit('update:isReload', false);
            }
            }
        },
    },
    methods:{
        getDataPointCount(data) {
            if (!data.lineData1) return 0;
            return data.lineData1.reduce((total, item) => total + (item.valueData ? item.valueData.length : 0), 0);
        },
        getTimeRange(data) {
            if (!data.lineData1 || data.lineData1.length === 0) return '无数据';
            
            const firstItem = data.lineData1[0];
            const lastItem = data.lineData1[data.lineData1.length - 1];
            
            if (!firstItem.valueData || firstItem.valueData.length === 0) return '无数据';
            
            const startTime = firstItem.valueData[0].watchTime;
            const endTime = firstItem.valueData[firstItem.valueData.length - 1].watchTime;
            
            return `${startTime.split(' ')[0]} 至 ${endTime.split(' ')[0]}`;
        },
        getSatusShow(data){
            if(!data.line || !data.line.OUTLIERSIGNs || data.line.OUTLIERSIGNs.length <= 0){
                return '暂无'
            }

            const sta = []
            data.line.OUTLIERSIGNs.forEach(item=>{
                if(item == 0){
                    sta.push('未审核')
                }

                if(item == 1){
                    sta.push('审核通过')
                }

                if(item == 2){
                    sta.push('审核未通过')
                }
            })

            return sta.join(',')
        },
        toggleChart(chartId) {
            const index = this.expandedChartIds.indexOf(chartId);
            if (index > -1) {
                this.expandedChartIds.splice(index, 1);
            } else {
                this.expandedChartIds.push(chartId);
                this.$nextTick(() => {
                    this.redrawChart(chartId);
                });
            }
        },
        handleResize() {
            if (this.resizeTimer) clearTimeout(this.resizeTimer);
            this.resizeTimer = setTimeout(() => {
                Object.keys(this.chartInstances).forEach(id => {
                const instance = this.chartInstances[id];
                if (instance && !instance.isDisposed()) {
                    instance.resize();
                }
                });
            }, 300);
        },
        getTreeID(treeId){
            this.treeId = treeId
            this.clearChart(true);
        },
        clearChart(isReload){
            if (this.resizeTimer) {
                clearTimeout(this.resizeTimer);
                this.resizeTimer = null;
            }
            Object.keys(this.chartInstances).forEach(id => {
                const instance = this.chartInstances[id];
                if (instance && !instance.isDisposed()) {
                    instance.off('click'); 
                    instance.dispose();  
                }
                delete this.chartInstances[id]; 
            });
            this.chartInstances = {};
            if(isReload){
                this.$nextTick(() => {
                    this.handleGetLineViewsByTreeID();
                });
            }
        },
       handleGetLineViewsByTreeID() {
        if (this.treeId && this.treeId == 0) {
            this.debouncedLoad(false);
            this.allowTreeIdWatch = true;
            return;
        }
        this.loading = true;
        this.chartDataList = [];
        this.expandedChartIds = [];
        getLineViewsByTreeID({
            GraphTreeID: this.treeId,
            StationID: this.stationId
        }).then(res => {
            if (res.isSuccess) {
                if (res.data.length > 0) {
                    res.data.forEach((item, index) => {
                    this.chartDataList.push({
                        id: item.line.id,
                        name: item.line.name,
                        data: item
                    });
                    this.expandedChartIds.push(item.line.id);
                    });
                    this.$nextTick(() => {
                    this.initChart();
                    });
                    this.loading = false;
                } else {
                    this.loading = false;
                }
            } else {
                this.loading = false;
            }
        }).finally(() => {
            this.loading = false;
        });
        },
        initChart() {
            this.chartDataList.forEach((item, index) => {
                const dom = document.getElementById(`chart${item.id}`);
                if (!dom) return;

                // 销毁旧实例（如果存在）
                if (this.chartInstances[item.id] && !this.chartInstances[item.id].isDisposed()) {
                this.chartInstances[item.id].dispose();
                }

                // 创建新实例
                const chart = this.$echarts.init(dom);
                this.chartInstances[item.id] = chart;
                this.drawLinchart(item.data, chart);
            });
        },
        getSymbolType(icon) {
            const symbols = [
                'circle', 'emptyCircle', 'rectangle', 'emptyRectangle',
                'triangle', 'emptyTriangle', 'diamond', 'emptyDiamond'
            ];
            return symbols[icon - 1] || 'emptyCircle';
        },
        generateSeriesData(lineData, yAxisIndex = 0) {
            return lineData.map(itemData => ({
                name: itemData.point,
                type: 'line',
                connectNulls: true,
                showAllSymbol:true,
                yAxisIndex,
                showSymbol: itemData.icon && Number(itemData.icon) > 0,
                symbol: this.getSymbolType(itemData.icon),
                symbolSize: 5, 
                data:itemData.valueData.map(sub => sub.value === null ? null : Number(sub.value)),  
                symbolKeepAspect: true,
                itemStyle: { color: itemData.color },
                lineStyle: { color: itemData.color, width: itemData.blod }
            }));


            
        },
        getUnitText(chartData,lineData, unitTxtKey, defaultPrefix = '单位') {
            const unit = lineData[0]?.unit;
            return unit ? (chartData.line[unitTxtKey] || `${defaultPrefix}(${unit})`) : null;
        },
        drawLinchart(chartData,chartInstance){
            if (!chartInstance || chartInstance.isDisposed()) return; 
            const { lineData1, lineData2, line } = chartData;
            if(lineData1 == null) return
            let LineKeys = []
            lineData1.forEach((itemData,index)=>{
                itemData.valueData.forEach(sub=>{
                    if(index == 0){
                        LineKeys.push(sub.timeText)
                    }
                })
            })
           
            const nameList = [
                ...(lineData1?.map(item => item.point) || []),
                ...(lineData2?.map(item => item.point) || [])
            ];

            const series = [
                ...(lineData1 ? this.generateSeriesData(lineData1) : []),
                ...(lineData2 ? this.generateSeriesData(lineData2, 1) : [])
            ];

            const yAxis = [];
            if (lineData1?.length) {
                yAxis.push({
                    type: 'value',
                    interval: Number(line.valueLen),
                    max: line.valueMax,
                    min: line.valueMin,
                    name: this.getUnitText(chartData,lineData1, 'unitTxt'),
                    axisLine: { show: true },
                    splitLine: { show: true, lineStyle: { type: 'dashed', color: '#a8a8a8' } },
                    axisLabel: { formatter: value => value.toString() }
                });
            }
            if (lineData2?.length) {
                yAxis.push({
                    type: 'value',
                    scale: true,
                    interval: Number(line.valueLen1),
                    max: line.valueMax1,
                    min: line.valueMin1,
                    name: this.getUnitText(chartData,lineData2, 'unitTxt1'),
                    axisLine: { show: true },
                    splitLine: { show: true, lineStyle: { type: 'dashed', color: '#a8a8a8' } },
                    axisLabel: { formatter: value => value.toString() }
                });
            }

            const option = {
                tooltip: { trigger: 'axis', confine: true },
                legend: { top: "20", data: nameList, type: 'scroll' },
                grid: {
                    top: 70,
                    left: '5%',
                    right: '5%',
                    bottom: 40,
                    containLabel: true,
                    borderWidth: 1,
                    show: true,
                    borderColor: '#000'
                },
                toolbox: {
                feature: {
                    dataZoom: { yAxisIndex: 'none' },
                    saveAsImage: {}
                }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: ['2%', '2%'],
                    onZero:false,
                    data: LineKeys,
                    show: true, // X轴 网格线 颜色类型的修改
                    axisLine: {
                        onZero: false, // Y轴线
                        
                    },
                    splitLine: {
                        show: true, // X轴线 颜色类型的修改
                        lineStyle: {
                        type: 'dashed',
                        color: '#a8a8a8',
                        },
                    },
                },
                yAxis,
                dataZoom: [{ type: 'inside' }],
                series
            };
            chartInstance.setOption(option, true);
        },
        handleAddLine(data){
           this.linesAddDialog = true;
            this.linesDialogForm = {...data};
        },
        redrawChart(chartId) {
            const chartData = this.chartDataList.find(item => item.id === chartId)?.data;
            if (!chartData) {
                this.$set(this.chartLoading, chartId, false);
                return;
            }

            if ((!chartData.lineData1 || chartData.lineData1.length === 0) && 
            (!chartData.lineData2 || chartData.lineData2.length === 0)) {
            
                // 清空图表
                if (this.chartInstances[chartId] && !this.chartInstances[chartId].isDisposed()) {
                this.chartInstances[chartId].clear();
                this.chartInstances[chartId].setOption({
                    title: {
                    text: '暂无数据',
                    left: 'center',
                    top: 'center',
                    textStyle: {
                        color: '#999',
                        fontSize: 14
                    }
                    }
                }, true);
                }
                
            
                return;
            }


            if (!this.chartInstances[chartId] || this.chartInstances[chartId].isDisposed()) {
                const dom = document.getElementById(`chart${chartId}`);
                if (!dom) return;
                this.chartInstances[chartId] = this.$echarts.init(dom);
            }

            const chartInstance = this.chartInstances[chartId];
            this.drawLinchart(chartData, chartInstance);

            if (this.resizeTimer) clearTimeout(this.resizeTimer);
            this.resizeTimer = setTimeout(() => {
                if (!chartInstance.isDisposed()) {
                chartInstance.resize();
                }
            }, 200);
            },
        onGetLineInfo(callback) {
            this.$set(this.chartLoading, this.LineID, true);
            getLineInfosV1({
                b_Time: this.startTime || '',
                e_Time: this.endTime || '',
                lineID: this.LineID
            }).then(res => {
                if (res.isSuccess) {
                this.chartDataList.forEach(item => {
                    if (item.id == this.LineID) {
                    item.data = {...res.data};
                    this.redrawChart(this.LineID);
                    }
                });
                }
            }).finally(() => {
                this.$set(this.chartLoading, this.LineID, false);
                this.startTime = '';
                this.endTime = '';
                this.LineID = 0;
                if (typeof callback === 'function') {
                callback();
                }
            });
        },
        handleSetLineDataDialog(id,info){
            this.LineID = id
            this.setDataForm = [...info]
            this.setLineDataDialog = true
        },
        handleSaveSetDialog(data){ 
            this.LineID = data[0].lineID;
            this.onGetLineInfo(() => {
                this.setDataForm = [];
                this.$message.success('分布图配置成功');
            });
        },
        handleDelLine(id,name){
            this.$confirm(`确认删除名称为 ${name} 的分布图？`,{
                type:'warning'
            }).then(() => {
                linesDel({ID:id}).then(res=>{  
                    if(res.isSuccess){
                        if (this.chartInstances[id]) {
                            this.chartInstances[id].dispose();
                            delete this.chartInstances[id];
                        }
                        this.chartDataList = this.chartDataList.filter(item => item.id !== id);
                        this.expandedChartIds = this.expandedChartIds.filter(expId => expId !== id);
                        this.$nextTick(() => {
                            this.initChart(); 
                        });
                        this.$message.success('删除成功');
      
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }).catch(() => {});  
        }, 
        handleConfirmExamine(){
            setLineOUTLIERSIGN({
                lineID:this.LineID,
                outliersigNs:this.OUTLIERSIGNs
            }).then(res=>{
                if(res.isSuccess){
                    this.onGetLineInfo(()=>{
                        this.examineDialogVisible = false
                        this.OUTLIERSIGNs = []
                        this.LineID = 0
                    })
                }else{
                this.$message.error(res.errorMessage)
                } 
            })
        },
        handleSetExamineData(data){
            this.OUTLIERSIGNs = data.OUTLIERSIGNs
            this.LineID = data.id
            this.examineDialogVisible = true
        },
        handleSetTimeData(data){
            this.timeData = {
                t_Len:data.T_Len,
                b_Time:data.dT1
            }
            this.LineID = data.lineID
            this.timeDialogVisible = true
        },
        handleConfirmTime(){
            setFBTTime({
                lineID:this.LineID,
                T_len:this.timeData.t_Len,
                dT1:this.timeData.b_Time,
            }).then(res=>{
                if(res.isSuccess){
                    this.onGetLineInfo(()=>{
                        this.timeDialogVisible = false
                        this.timeData = {}
                        this.LineID = 0
                    })
                }
            })
        },
       handleSaveLineDialog(data) {
            this.LineID = data.id;
            this.onGetLineInfo(() => {
                this.linesDialogForm = {};
                this.$message.success('分布图修改成功');
            });
        },
        handleSetFilterData(data) {
            if (data) {
                this.filterSelectList = [...data];
                this.LineID = data[0].lineID;
                this.filterVisible = true;
            }
        },
        selectAll() {
            this.OUTLIERSIGNs = [0, 1, 2]
        },
        clearAll() {
            this.OUTLIERSIGNs = []
        },
        handlerestoreLine(id, index) {
            this.LineID = id;
            this.restoreList = this.chartDataList[index].data.lineInfos;
            this.restoreVisible = true;
        },
        handleCloseRefreshDel() {
            this.onGetLineInfo(() => {
                this.$message.success('删除点恢复成功');
            });
        },
    }
})
</script>

<style scoped lang="scss">
.chartLine{
    width: 100% !important;
    height: 100%;
    z-index: 999;
}
.boxDistribution{
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - 170px);
    overflow: hidden;
    gap: 10px;
    .left-wrapper{
        width: 340px;
        height: calc(100vh - 180px);
        flex-shrink: 0;
        margin-top:10px;
    }
    .chart-container{
        height: calc(100vh - 180px);
        margin-top:10px;
        overflow: auto;
    }
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  height: calc(100vh - 185px);
}

.chart-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chart-card {
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  border-bottom: 1px solid #eaeaea;
  transition: background-color 0.2s;
  
  &:hover {
    background-color: #f9f9f9;
  }
}

.chart-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  
  .title-icon {
    margin-right: 8px;
    color: #409EFF;
    font-size: 18px;
  }
}

.chart-actions {
  .expand-icon {
    transition: transform 0.3s;
    
    &.expanded {
      transform: rotate(180deg);
    }
  }
}

.chart-card-content {
  padding: 0;
}

.chart-toolbar {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eaeaea;
  flex-wrap: wrap;
  gap: 8px;
  
  .toolbar-btn {
    margin-right: 0;
  }
}

.chart-wrapper {
  margin: 0 auto;
  padding: 10px;
}

.chart-line {
  width: 100% !important;
  height: 100%;
}

.chart-info {
  display: flex;
  padding: 12px 20px;
  background-color: #f9f9f9;
  border-top: 1px solid #eaeaea;
  font-size: 12px;
  
  .info-item {
    display: flex;
    margin-right: 24px;
    
    .info-label {
      color: #909399;
      margin-right: 6px;
    }
    
    .info-value {
      color: #606266;
      font-weight: 500;
    }
  }
}
.examine-filter-dialog .el-checkbox {
  height: auto;
}

.examine-filter-dialog .el-checkbox__input {
  margin-top: -1px;
}

.examine-filter-dialog .el-checkbox__label {
  font-size: 13px;
  padding-left: 6px;
}
.dialog-content {
  padding: 0 8px;
}
/* 筛选说明 */
.filter-tip {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #f0f7ff;
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #409EFF;
}

.filter-tip i {
  margin-right: 6px;
  font-size: 14px;
}

/* 筛选区域 */
.filter-section {
  margin-bottom: 16px;
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.filter-title {
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

.quick-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.quick-actions .el-button {
  padding: 2px 6px;
  font-size: 12px;
  color: #409EFF;
}

.compact-option {
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  transition: all 0.2s;
}

.compact-option:hover {
  border-color: #c0c4cc;
  background: #f5f7fa;
}

.compact-option:last-child {
  margin-bottom: 0;
}

.compact-checkbox {
  width: 100%;
  margin: 0;
}

.compact-checkbox >>> .el-checkbox__label {
  width: 100%;
  padding-left: 8px;
}

.option-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.status-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

.status-badge.pending {
  background: #909399;
}

.status-badge.approved {
  background: #67C23A;
}

.status-badge.rejected {
  background: #F56C6C;
}

.status-text {
  font-size: 13px;
  color: #303133;
  flex: 1;
}

.status-count {
  font-size: 12px;
  color: #909399;
  margin-left: 4px;
}
.filter-stats {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

.stats-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stats-label {
  font-size: 12px;
  color: #909399;
}

.stats-value {
  font-size: 12px;
  color: #303133;
  font-weight: 500;
}


/* 设置区域 */
.setting-section {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.section-header i {
  color: #409EFF;
  margin-right: 6px;
  font-size: 14px;
}

.section-title {
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

/* 时间类型选择 */
.type-radio-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.type-radio {
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  transition: all 0.3s;
}

.type-radio:hover {
  border-color: #409EFF;
  background: #f0f7ff;
}

.is-checked {
  border-color: #409EFF;
  background: #f0f7ff;
}

.radio-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio-content i {
  font-size: 16px;
  color: #409EFF;
}

.radio-text {
  font-weight: 500;
  color: #303133;
  font-size: 13px;
}

.radio-desc {
  font-size: 12px;
  color: #909399;
  margin-left: auto;
}

/* 日期设置 */
.date-setting {
  margin-top: 8px;
}

.date-label {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
  color: #606266;
}

.date-label i {
  margin-right: 4px;
  font-size: 12px;
  color: #409EFF;
}

.date-range-group {
  display: flex;
  gap: 12px;
}

.date-item {
  flex: 1;
}

.compact-date-picker {
  width: 100%;
}
/* 日期验证警告 */
.date-warning {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding: 6px 10px;
  background: #fef0f0;
  border: 1px solid #fbc4c4;
  border-radius: 4px;
  font-size: 12px;
  color: #f56c6c;
}

.date-warning i {
  margin-right: 4px;
}

</style>
